<template>
  <div class="user-profile-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <el-row>
        <el-col :span="8">
          <el-menu
            mode="horizontal"
            :default-active="activeIndex"
            class="el-menu-demo"
            @select="handleSelect"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">消息</el-menu-item>
            <el-menu-item index="3">发现</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="8" class="text-center">
          <el-input
            v-model="searchText"
            placeholder="搜索内容"
            clearable
            prefix-icon="ElIconSearch"
            @keyup.enter.native="handleSearch"
          >
            <template #append>
              <el-button @click="handleSearch">搜索</el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8" class="text-right">
          <el-avatar :size="40" src="https://picsum.photos/200/200?random=user"></el-avatar>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              用户名 <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="settings">设置</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主要内容区 -->
    <el-main class="main-content">
      <el-row>
        <!-- 左侧边栏 -->
        <el-col :span="6">
          <el-card class="sidebar-card">
            <div class="user-info">
              <el-avatar :size="100" src="https://picsum.photos/200/200?random=user"></el-avatar>
              <h3 class="username">{{ studentInfo.userName }}</h3>
              <p class="user-desc">这里是用户简介，介绍一下自己吧。</p>
            </div>
            <el-divider></el-divider>
            <el-menu
              mode="vertical"
              :default-active="activeSidebarIndex"
              @select="handleSidebarSelect"
            >
              <el-menu-item index="1">
                <i class="el-icon-user"></i>
                <span>个人主页</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-document"></i>
                <span>我的课程</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-time"></i>
                <span>预约记录</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-s-custom"></i>
                <span>考试安排</span>
              </el-menu-item>
              <el-menu-item index="5">
                <i class="el-icon-s-order"></i>
                <span>费用明细</span>
              </el-menu-item>
              <el-menu-item index="6">
                <i class="el-icon-s-cooperation"></i>
                <span>我的教练</span>
              </el-menu-item>
              <el-menu-item index="7">
                <i class="el-icon-setting"></i>
                <span>账户设置</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>

        <!-- 右侧内容区 -->
        <el-col :span="18">
          <!-- 学员详细信息卡片 -->
          <el-card class="detail-card">
            <div class="detail-header">
              <h2 class="detail-title">学员详细信息</h2>
              <el-button type="primary" @click="editProfile">编辑信息</el-button>
            </div>

            <el-divider></el-divider>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form :model="studentInfo" label-width="120px">
                  <el-form-item label="姓名">
                    <el-input v-model="studentInfo.tureName" disabled>{{ studentInfo.tureName }}</el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="studentInfo.student.type" disabled>
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="身份证号">
                    <el-input v-model="studentInfo.student.cardId" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <el-input v-model="studentInfo.phone" disabled></el-input>
                  </el-form-item>
                </el-form>
              </el-col>

              <el-col :span="12">
                <el-form :model="studentInfo" label-width="120px">
                  <el-form-item label="报考车型">
                    <el-select v-model="studentInfo.carType" disabled>
                      <el-option label="C1 (手动挡)" value="C1"></el-option>
                      <el-option label="C2 (自动挡)" value="C2"></el-option>
                      <el-option label="B2 (大型货车)" value="B2"></el-option>
                      <el-option label="A1 (大型客车)" value="A1"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="入学时间">
                    <el-date-picker
                      v-model="studentInfo.enrollDate"
                      type="date"
                      placeholder="选择日期"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                  <el-form-item label="当前进度">
                    <el-progress :percentage="studentInfo.progress"
                                 :format="progressFormat"></el-progress>
                    <div class="progress-text">{{ studentInfo.progressText }}</div>
                  </el-form-item>
                  <el-form-item label="已完成科目">
                    <el-tag v-for="(subject, index) in studentInfo.completedSubjects" :key="index"
                            type="success">
                      {{ subject }}
                    </el-tag>
                  </el-form-item>
                  <el-form-item label="教练">
                    <el-input v-model="studentInfo.coach" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="studentInfo.notes" disabled></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>

            <!-- 考试记录 -->
            <el-divider content-position="left">考试记录</el-divider>

            <el-table :data="examRecords" stripe style="width: 100%">
              <el-table-column prop="subject" label="考试科目"></el-table-column>
              <el-table-column prop="date" label="考试日期"></el-table-column>
              <el-table-column prop="result" label="考试结果">
                <template #default="scope">
                  <el-tag :type="scope.row.passed ? 'success' : 'danger'">
                    {{ scope.row.passed ? '通过' : '未通过' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="score" label="分数"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>

            <!-- 预约记录 -->
            <el-divider content-position="left">最近预约</el-divider>

            <el-table :data="appointmentRecords" stripe style="width: 100%">
              <el-table-column prop="type" label="预约类型"></el-table-column>
              <el-table-column prop="date" label="预约日期"></el-table-column>
              <el-table-column prop="time" label="预约时间"></el-table-column>
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">
                    {{ getStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    v-if="scope.row.status === 1"
                    @click="cancelAppointment(scope.row.id)">
                    取消
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部 -->
    <el-footer class="footer">
      <p>© 2025 驾校学员管理系统版权所有</p>
      <div class="footer-links">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">隐私政策</a>
        <a href="#">服务条款</a>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
// 导航栏相关
const activeIndex = ref('1')
const searchText = ref('')

// 侧边栏相关
const activeSidebarIndex = ref('1')
const router = useRoute()
// 学员详细信息
const studentInfo = ref({
  userName: '',
  password: '',
  accountNumber: 0,
  studentId: 0,
  usertype: 0,
  tureName: '',
  phone: '',
  student: {}
})
getStudentInfo(router)

function getStudentInfo(nv) {
  const params = new URLSearchParams()
  params.append('accountNumber', nv.params.accountNumber)
  //请求路径为http://localhost:8787/api/viewProfile/personalCenter，参数为accountNumber
  axios.post('http://localhost:8787/api/viewProfile/personalCenter',params).then((res) => {
    console.log('后端返回数据', res.data)
    studentInfo.value = res.data
  }).catch((err) => {
    console.log('请求失败', err)
  })
}

console.log('学员详细信息', studentInfo)
// 考试记录
const examRecords = reactive([
  {
    subject: '科目一',
    date: '2025-02-20',
    result: true,
    passed: true,
    score: 95,
    remark: '成绩优秀'
  },
  {
    subject: '科目二',
    date: '2025-03-30',
    result: true,
    passed: true,
    score: 88,
    remark: '倒车入库需加强练习'
  }
])

// 预约记录
const appointmentRecords = reactive([
  {
    id: 1,
    type: '科目二练习',
    date: '2025-05-28',
    time: '09:00-11:00',
    status: 1 // 1: 待完成, 2: 已完成, 3: 已取消
  },
  {
    id: 2,
    type: '科目三路考',
    date: '2025-06-05',
    time: '14:00-16:00',
    status: 1
  },
  {
    id: 3,
    type: '科目二模拟',
    date: '2025-05-20',
    time: '10:00-12:00',
    status: 2
  }
])

// 方法定义
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

const handleCommand = (command) => {
  console.log('Dropdown command:', command)
  if (command === 'logout') {
    // 处理退出登录逻辑
    alert('退出登录成功！')
  }
}

const handleSidebarSelect = (key, keyPath) => {
  console.log('Sidebar selected:', key, keyPath)
  activeSidebarIndex.value = key
}

const handleSearch = () => {
  console.log('Search:', searchText.value)
  // 执行搜索逻辑
}

const editProfile = () => {
  alert('编辑学员信息功能开发中...')
}

const progressFormat = (percentage) => {
  return `${percentage}%`
}

const getStatusText = (status) => {
  const statusMap = {
    1: '待完成',
    2: '已完成',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'info'
  }
  return typeMap[status] || 'default'
}

const cancelAppointment = (id) => {
  const appointment = appointmentRecords.find(item => item.id === id)
  if (appointment) {
    appointment.status = 3
    alert('预约已取消！')
  }
}

// 页面加载时执行
onMounted(() => {
  // 模拟加载数据
  console.log('学员信息页面加载完成')
})
</script>

<style scoped>
.user-profile-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px 20px;
  z-index: 1000;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

.footer {
  text-align: center;
  padding: 20px;
  background-color: #ffffff;
  border-top: 1px solid #ebeef5;
}

.footer-links {
  margin-top: 10px;
}

.footer-links a {
  margin: 0 10px;
  color: #909399;
  text-decoration: none;
}

.sidebar-card {
  margin-right: 20px;
  height: fit-content;
}

.user-info {
  text-align: center;
  padding: 20px 0;
}

.username {
  margin: 10px 0 5px;
  font-weight: bold;
}

.user-desc {
  color: #909399;
  font-size: 14px;
}

.detail-card {
  padding: 20px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.detail-title {
  font-size: 20px;
  font-weight: bold;
}

.progress-text {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
}
</style>
